<template>
  <div class="main w100 h100">
    <div class="head w100">
      <main-head></main-head>
    </div>
    <div class="content w100">
      <div class="left">
        <main-nav></main-nav>
      </div>
      <div class="right">
        <div class="info-area">
          <alarm-scroll v-if="$route.path === `/show/location`"></alarm-scroll>
          <nav-breadcrumb v-show="$route.path !== `/show/location`"></nav-breadcrumb>
        </div>
        <div class="message">
          <vue-scroll :ops="ops">
            <div class="messages" id="message">
              <router-view/>
            </div>
          </vue-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import MainHead from './MainHead'
  import MainNav from './MainNav'
  import AlarmScroll from '../../components/AlarmScroll'
  import NavBreadcrumb from '../../components/NavBreadcrumb'
  export default {
    name: 'Main',
    components: {
      MainHead,
      MainNav,
      AlarmScroll,
      NavBreadcrumb
    },
    data() {
      return {
        ops: {
          bar: {
            background: '#DDDEE0',
            onlyShowBarOnScroll: false,
          }
        },
      }
    }
  }
</script>

<style lang="scss" scoped>
body {font-size:1em;}
.main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  // font-family: "Microsoft YaHei";
  .head {
    color: #fff;
    background-color: #eb3838;
    height: 60px;
  }
  .content {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    overflow-y: scroll;
    overflow-x: hidden;
    .left {
      width: 240px;
      background-color: #292525;
      height: 100%;
      overflow-y: scroll;
      scrollbar-width: none;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .right{
      background: #f0f0f0;
      right: 0;
      top: 60px;
      position: absolute;
      width: calc(100% - 240px);
      height: calc(100% - 60px);
      .info-area {
        height: 30px;
        background: #fff;
        overflow: hidden;
      }
      .message {
        width: 100%;
        height: calc(100% - 30px);

      }
      .messages {
        box-sizing: border-box;
        padding: 12px 24px 24px 24px;
        position: absolute;
        width: 100%;
        height: 100%;
        // height: 990px;
      }
    }
  }
}
@media screen and (max-width: 1616px) {
  #message {
    width: 1376px;
  }
}
@media screen and (max-height: 768px) {
  #message {
    height: 678px;
  }
}
</style>
